<template>
    <div class="app-container">
      <WarehouseRateDetail ref="openWarehouseRateDetail"></WarehouseRateDetail>
      <el-form @submit.native.prevent :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px" :label-position="labelPosition">
        <el-form-item label="仓库" prop="spckid1">
            <el-select
                v-model="queryParams.spckid1"
                placeholder="请选择"
                clearable
                @change="changeWarehouse"
                :loading="selectWarehouse18Loading"
                filterable
            >
                <el-option
                    v-for="item in selectWarehouse18"
                    :key="item.spckid"
                    :label="item.spckmc"
                    :value="item.spckid"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="选择日期" prop="rqid">
            <el-date-picker
              value-format="yyyy-MM-dd"
              default-value
              v-model="queryParams.rqid"
              type="date"
              placeholder="请输入选择日期"
              @change="changeDate">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      
      <el-table
        v-loading="loading"
        :data="warehouseRateList"
      > 
        <af-table-column label="操作" align="center" class-name="small-padding fixed-width" width="80" fixed="left">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="openWarehouseRate(scope.row)"
            >明细</el-button>
          </template>
        </af-table-column>
        <af-table-column prop="spckmc" label="仓库"></af-table-column>
        <af-table-column prop="spsl" label="库存(吨)"></af-table-column>
        <af-table-column prop="maxspsl" label="峰值库存(吨)"></af-table-column>
        <af-table-column prop="jlr" label="净流入(吨)"></af-table-column>
        <af-table-column prop="szsl" label="散租货物(吨)"></af-table-column>
        <af-table-column prop="zzlm1" label="月周转率"></af-table-column>
        <af-table-column prop="sysl" label="剩余可存吨数"></af-table-column>
      </el-table>
       <pagination
          v-show="total>0"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="getList"
        />
      <el-form @submit.native.prevent :model="queryChartParams" ref="queryChartParams" size="small" :inline="true" v-show="showSearch" label-width="120px" :label-position="labelPosition" class="mt20">
        <el-form-item label="仓库" prop="spckid">
          <el-select
              v-model="queryChartParams.spckid"
              placeholder="请选择"
              clearable
              @change="changeChartWarehouse"
              :loading="selectWarehouse18Loading"
              filterable
          >
              <el-option
                  v-for="item in selectWarehouse18"
                  :key="item.spckid"
                  :label="item.spckmc"
                  :value="item.spckid"
              />
          </el-select>
        </el-form-item>
        <el-form-item label="选择日期" prop="happenDate">
          <el-date-picker
              v-model="happenDate"
              value-format="yyyy-MM-dd"
              :type="dateType"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="happenDateChange()">
              </el-date-picker>
        </el-form-item>
        <el-form-item label="结存天数">
          <el-radio v-model="queryChartParams.dayOrMonth" label="month" @change="changeDayOrMonth">按月</el-radio>
          <el-radio v-model="queryChartParams.dayOrMonth" label="day" @change="changeDayOrMonth">按日</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getChart">搜索</el-button>
        </el-form-item>
      </el-form>
      <div id="customerCategoryChartId" :style="chartStyle" ></div>
    </div>
  </template>
  
  <script>
  import { getListWarehouseRate, getWarehouseRateChart } from "@/api/storage/dataAnalysis/warehouseRate";
  import { selectWarehouse18 } from "@/api/storage/warehouse"
  import WarehouseRateDetail from "./warehouseRateDetail"
  import { getAllMonths } from '@/utils'
  import echarts from 'echarts';
  import variables from '@/assets/styles/variables.scss'

  export default {
    name: "WarehouseRate",
    components: {WarehouseRateDetail},
    data() {
      return {
        // 显示搜索条件
        showSearch: true,
        //对齐
        labelPosition: "right",
        //加载列表
        loading: true,
        //详情列表加载
        detailLoading:true,
        //加载客户
        selectWarehouse18Loading: true,
        //选择日期
        happenDate: "",
        //日期类型
        dateType:"monthrange",
        // 查询参数
        queryParams: {
          spckid1: "",
          rqid: ""
        },
        queryChartParams: {
          d1:"",
          d2:"",
          spckid:"",
          dayOrMonth:"month",
        },
        //图表属性
        chartStyle: {
          height:"500px",
          width:"800px",
          margin:"60px auto"
        },
        // 库存利用率列表
        warehouseRateList: [],
        //客户列表
        selectWarehouse18:[],
        //页数
        pageSize: 10,
        //页码
        pageNum:1,
        // 总条数
        total: 0,
        //展开页数
        detailPageSize:10,
      };
    },
    beforeRouteEnter(to, from, next) {
      const params = to.params
      next(vm => {   
        if(Object.keys(params).length > 0) {
          if(to.params.refresh == true) {
            vm.getList()
          }
        }
      })
    },
    created() {
      this.getSelectWarehouse18()
      this.getList()
    },
    mounted() {
      const date1 = new Date()
      let date2 = new Date(date1)
      date2.setMonth(date1.getMonth() - 12)
      const dates = getAllMonths(date2, date1)
      this.queryChartParams.d1 = dates[0] + '-01'
      this.queryChartParams.d2 = dates[dates.length -1] + '-01'
      this.happenDate = [this.queryChartParams.d1, this.queryChartParams.d2]
      this.getChart()
    },
    methods: {
      /**获取客户 */
      getSelectWarehouse18() {
        this.selectWarehouse18Loading = true
        selectWarehouse18({}).then(response => {
          this.selectWarehouse18 = response.data
          this.selectWarehouse18Loading = false
        })
      },
      
      /** 查询库存利用率列表 */
      getList() {
        this.loading= true
        getListWarehouseRate(this.queryParams, {pageNum:this.pageNum, pageSize:this.pageSize}).then(response => {
          this.warehouseRateList = response.rows
          this.total = response.total
          this.loading= false
        });
      },

      openWarehouseRate(row) {
        const data = JSON.parse(JSON.stringify(row))
        this.$refs.openWarehouseRateDetail.open(data, this.queryParams.rqid)
      },

       /** 查询库存利用率图表信息 */
      getChart() {
        let chart = echarts.init(document.getElementById('customerCategoryChartId'))
        chart.showLoading({
          text:"",
          color:"#192C59",
          textCloor:"#192C59",
          spinnerRadius: 18,
          lineWidth: 2,
        })
        getWarehouseRateChart(this.queryChartParams).then(response => {
          const data = response.data
          chart.hideLoading()
          this.initChart(data, chart)
        });
      },
  
      /**客户改变 */
      changeWarehouse() {
        this.getList()
      },
      /**改变图表库存 */
      changeChartWarehouse() {
        this.getChart()
      },
      /**改变图表月份 */
      changeDayOrMonth(data) {
        if(data == "day") {
          this.queryChartParams.dayOrMonth = "day"
          this.dateType = "daterange"
        }
        if(data == "month") {
          this.queryChartParams.dayOrMonth = "month"
          this.dateType = "monthrange"
        } 
        this.getChart()
      },

      /**选择发生时间 */
      happenDateChange() {
        this.queryChartParams.d1 = this.happenDate?this.happenDate[0]:""
        this.queryChartParams.d2 = this.happenDate?this.happenDate[1]:""
        this.getChart()
      },

      changeDate() {
        this.getList()
      },
      /**图表 */
      initChart(data, chart) {
        const xAxisName = data.map(item => item.ssrqid)
        const weight = data.map(item => item.spsl)
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'cross' // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          legend: {},
          xAxis: [{
            type: 'category',
            data: xAxisName,
            name:"日期",
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
            type: 'value',
            name: '重量/吨',
            splitLine: {show: false},
          }],
          series: [{
            name: '重量',
            type: 'bar',
            barGap:'20%',
            barCategoryGap: '40%',
            barWidth: '60%',
            data: weight,
          }]
        }
        // 使用刚指定的配置项和数据显示图表。
        chart.setOption(option)
      },

      /** 重置按钮操作 */
      resetQuery() {
        this.reset()
        this.getSelectWarehouse18()
        this.getList()
        this.getChart()
      },
      reset() {
        Object.assign(this.$data, this.$options.data())
      },
    }
  };
  </script>
  